<!-- 详情小弹窗 -->
<template>
  <div class="popup-container">
    <!-- 可拖拽区域 -->
    <div class="dialog-drag-wrap"></div>
    <div class="close-btn" @click="closePopup"></div>
    <!-- 关闭弹框 -->
    <component :is="modelName" :parames="parames" @close="closePopup" v-if="isShow"></component>
  </div>
</template>

<script>
import '@/styles/common/dialogPage.scss'
import DeviceDetails from '../DialogCards/DeviceDetails/Main' // 设备物联
import DialNumber from '../DialogCards/DialNumber/Main' // 拨打电话
import Peripherals from '../DialogCards/Peripherals/Main' // 周边设备
import Navigation from '../DialogCards/Navigation/Main' //  导航
import HiddenDanger from '../DialogCards/HiddenDanger/Main' // 隐患
import PatrolPoint from '../DialogCards/PatrolPoint/Main' // 巡检点位
import CarDetail from '../DialogCards/CarDetail/Main' // 消防车详情

export default {
  name: 'Popup',
  components: {
    DeviceDetails,
    DialNumber,
    Peripherals,
    Navigation,
    HiddenDanger,
    PatrolPoint,
    CarDetail,
  },
  props: {
    openDialog: {
      type: Function,
      default() {
        false
      },
    },
    // 页面类型
    pageType: {
      default() {
        return false
      },
    },
    // 查询参数
    queryObj: {
      default() {
        return false
      },
    },
  },
  data() {
    return {
      isShow: false,
      modelName: this.pageType,
      parames: this.queryObj,
    }
  },
  created() {
    window.FunList.openCommonDialog = this.initPage
    window.FunList.closeCommonDialog = this.closePopup

    // 打开设备物联小弹框
    // window.FunList.openCommonDialog('DeviceDetails', {id: 1})
    // 打开周边设备小弹框
    //window.FunList.openCommonDialog('Peripherals', {id: 1})
    // 打开导航小弹框
    // window.FunList.openCommonDialog('Navigation', {id: 1})
    // 打开隐患整改弹框
    // window.FunList.openCommonDialog('HiddenDanger', {id: 251})
    // 打开巡检点位弹框
    // window.FunList.openCommonDialog('PatrolPoint', {id: 251})
    // 打开消防车详情
    // window.FunList.openCommonDialog('CarDetail', {id: 251})
    // 打开音视频通话弹框
    // window.FunList.openCommonDialog('DialNumber', {userName: '维保经理萧十一郎'})
  },
  methods: {
    // 页面初始化
    initPage(type, parames, callback) {
      let that = this
      that.isShow = true
      // 打开弹框
      if (that.openDialog && typeof that.openDialog === 'function') {
        that.openDialog(true)
      }
      if (this.modelName == type) {
        this.reload()
      }
      that.modelName = type
      that.parames = parames
    },
    reload() {
      this.isShow = false
      this.$nextTick(() => (this.isShow = true))
    },
    // 关闭弹框
    closePopup() {
      let that = this
      if (
        that.isShow &&
        (that.modelName === 'Peripherals' || that.modelName === 'DialNumber')
      ) {
        //清空查看周边和呼叫中心人员定位
        that.$Ctl.clearMapMark()
      }
      if (that.$Ctl.isCs(true)) {
        if (that.modelName === 'DeviceDetails') {
          // 常规探测器小弹窗
          that.$Cs.closeDetailsPage(10100)
        } else if (that.modelName === 'PatrolPoint') {
          // 巡检小弹窗
          that.$Cs.closeDetailsPage(10102)
        } else if (that.modelName === 'HiddenDanger') {
          // 隐患小弹窗
          that.$Cs.closeDetailsPage(10103)
        } else if (that.modelName === 'DialNumber') {
          // 音视频通话弹框
          that.$Cs.closeDetailsPage(10106)
        } else if (that.modelName === 'Navigation') {
          // 三维导航
          that.$Cs.closeDetailsPage(10101)
        } else if (that.modelName === 'CarDetail') {
          // 消防车详情
          that.$Cs.closeDetailsPage(10118)
        } /*  else if (that.modelName === 10107) { // 语音指令
          that.$Cs.closeDetailsPage(10107)
        } */ else {
          that.$Cs.closeDetailsPage(0)
        }
      } else {
        that.isShow = false
        if (that.openDialog && typeof that.openDialog === 'function') {
          that.openDialog(false)
        }
      }
    },
  },
}
</script>

<style scoped rel="stylesheet/scss" lang="scss">
.popup-container {
  position: relative;
  .dialog-drag-wrap {
    position: absolute;
    top: 0;
    left: 4%;
    width: 90%;
    height: 50px;
  }
  .close-btn {
    position: absolute;
    top: 52px;
    left: 560px;
    width: 30px;
    height: 30px;
    background: url(../../assets/images/dialogCards/close-btn.png) center center
      no-repeat;
    cursor: pointer;
  }
}
</style>
